<template>
	<div class="app-container">
		<!-- 顶部 -->
		<mt-header fixed :title="$store.state.title">
			<mt-button v-show="backFlag" @click="goBefore" icon="back" slot="left"></mt-button>
		</mt-header>
		<div style="height: 40px;width: 100vw;box-shadow: 0 2px 4px 0 rgba(0,0,0,0.03);position: fixed;"></div>
		<div style="height: 40px;"></div>
		<!-- 主体 -->
		<transition>
			<router-view></router-view>
		</transition>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				backFlag: false
			}
		},
		methods: {
			goBefore() {
				this.$router.go(-1)
			}
		},
		watch: {
			'$route.path': function(newVal) {
				this.backFlag = newVal && newVal !== '/home' && true
			}
		}
	}
</script>


<style scoped="scoped">
	.mint-header {
		background-color: #fdfdfd;
		font-size: 17px;
		color: #030303;
	}

	.app-container {
		overflow-x: hidden !important;
	}

	.v-enter {
		opacity: 0;
		transform: translateX(100%);
	}

	.v-leave-to {
		opacity: 0;
		transform: translateX(-100%);
		position: absolute;
	}

	.v-enter-active,
	.v-leave-active {
		transition: all .3s ease;
	}
</style>
